<template>  
  <uni-popup ref="formDialog" type="dialog">  
    <view class="dialog-container">  
      <!-- 弹窗标题 -->  
      <text class="dialog-title">{{ isEditMode ? '编辑客户' : '新增客户' }}</text>  

      <!-- 表单内容 -->  
      <view class="form-body">  
        <!-- 客户编号 -->  
        <view class="form-row">  
          <text class="form-label">客户编号</text>  
          <uni-input  
            type="text"  
            v-model="currentForm.clientNumber"  
            class="form-input"  
            placeholder="请输入客户编号"  
          />  
        </view>  

        <!-- 客户名称 -->  
        <view class="form-row">  
          <text class="form-label">客户名称</text>  
          <uni-input  
            type="text"  
            v-model="currentForm.clientName"  
            class="form-input"  
            placeholder="请输入客户名称"  
          />  
        </view>  
        
        <!-- 联系地址 -->  
        <view class="form-row">  
          <text class="form-label">联系地址</text>  
          <uni-input  
            type="text"  
            v-model="currentForm.contactAddress"  
            class="form-input"  
            placeholder="请输入联系地址"  
          />  
        </view>  

        <!-- 联系人 -->  
        <view class="form-row">  
          <text class="form-label">联系人</text>  
          <uni-input  
            type="text"  
            v-model="currentForm.contactPerson"  
            class="form-input"  
            placeholder="请输入联系人"  
          />  
        </view>  

        <!-- 手机号 -->  
        <view class="form-row">  
          <text class="form-label">手机号</text>  
          <uni-input  
            type="text"  
            v-model="currentForm.phoneNumber"  
            class="form-input"  
            placeholder="请输入手机号"  
          />  
        </view>  

        <!-- 客户经理 -->  
        <view class="form-row">  
          <text class="form-label">客户经理</text>  
          <uni-input  
            type="text"  
            v-model="currentForm.clientManager"  
            class="form-input"  
            placeholder="请输入客户经理"  
          />  
        </view>  

        <!-- 跟进状态 -->  
        <view class="form-row">  
          <text class="form-label">跟进状态</text>  
          <uni-input  
            type="text"  
            v-model="currentForm.followStatus"  
            class="form-input"  
            placeholder="请输入跟进状态"  
          />  
        </view>  

        <!-- 所属行业 -->  
        <view class="form-row">  
          <text class="form-label">所属行业</text>  
          <uni-input  
            type="text"  
            v-model="currentForm.industry"  
            class="form-input"  
            placeholder="请输入所属行业"  
          />  
        </view>  

        <!-- 客户属性 -->  
        <view class="form-row">  
          <text class="form-label">客户属性</text>  
          <uni-input  
            type="text"  
            v-model="currentForm.clientProperty"  
            class="form-input"  
            placeholder="请输入客户属性"  
          />  
        </view>  

        <!-- 最后沟通时间 -->  
        <view class="form-row">  
          <text class="form-label">最后沟通时间</text>  
          <uni-datetime-picker  
            type="date"  
            v-model="currentForm.lastCommunicationDate"  
            class="form-input"  
            placeholder="请选择日期"  
          />  
        </view>  
      </view>  

      <!-- 弹窗底部按钮 -->  
      <view class="dialog-footer">  
        <button class="uni-button cancel" @click="closeDialog">取消</button>  
        <button class="uni-button confirm" @click="submitFormData">确认</button>  
      </view>  
    </view>  
  </uni-popup>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      isEditMode: false, // 识别编辑模式  
      currentForm: {  
        clientNumber: '',  
        clientName: '',  
        contactAddress: '',  
        contactPerson: '',  
        phoneNumber: '',  
        clientManager: '',  
        followStatus: '',  
        industry: '',  
        clientProperty: '',  
        lastCommunicationDate: ''  
      }  
    };  
  },  
  methods: {  
    openDialog(isEdit, clientData) {  
		console.log(isEdit)
		console.log(clientData)
		console.log("编辑弹窗")
      this.isEditMode = isEdit; // 设置编辑模式  
      if (isEdit && clientData) {  
        this.currentForm = { ...clientData }; // 赋值  
      } else {  
        this.resetForm(); // 清空表单  
      }  
      this.$refs.formDialog.open(); // 打开弹窗  
    },  
    closeDialog() {  
      this.$refs.formDialog.close(); // 关闭弹窗  
    },  
    resetForm() {  
      this.currentForm = {  
        clientNumber: '',  
        clientName: '',  
        contactAddress: '',  
        contactPerson: '',  
        phoneNumber: '',  
        clientManager: '',  
        followStatus: '',  
        industry: '',  
        clientProperty: '',  
        lastCommunicationDate: ''  
      };  
    },  
    submitFormData() {  
      console.log('提交的数据:', this.currentForm);  
      this.closeDialog(); // 提交后关闭弹窗  
      // 这里可以添加你需要调用的 API 逻辑  
    }  
  }  
};  
</script>  

<style scoped>  
.dialog-container {  
  padding: 20rpx;  
  border-radius: 10px;  
  background-color: #ffffff; /* 背景颜色 */  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */  
}  
.dialog-title {  
  font-size: 32rpx;  
  font-weight: bold;  
  text-align: center;  
  margin-bottom: 20rpx;  
}  
.form-body {  
  margin: 20rpx 0;  
}  
.form-row {  
  margin-bottom: 15rpx;  
}  
.form-label {  
  display: block;  
  margin-bottom: 5rpx;  
  font-size: 28rpx;  
  color: #333; /* 字体颜色 */  
}  
.form-input {  
  width: 100%;  
  border: 1px solid #e0e0e0; /* 输入框边框 */  
  border-radius: 5px; /* 圆角 */  
  padding: 10rpx;  
}  
.dialog-footer {  
  display: flex;  
  justify-content: space-between;  
}  
.uni-button {  
  flex: 1;  
  margin: 5rpx; /* 按钮间距 */  
  padding: 10rpx 0; /* 按钮内边距 */  
  border-radius: 5px;  
}  
.cancel {  
  background-color: #f44336; /* 取消按钮颜色 */  
  color: #fff; /* 文字颜色 */  
}  
.confirm {  
  background-color: #4caf50; /* 确认按钮颜色 */  
  color: #fff; /* 文字颜色 */  
}  
</style>